<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";

import Database from '@tauri-apps/plugin-sql';
import {resolveResource} from "@tauri-apps/api/path";
import {DATABASE_PATH} from "./constant/ConfigConstant.ts";
import {Window} from '@tauri-apps/api/window';
import {ToolPlugin} from "./entity/Entity.ts";

const router = useRouter();
const appWindow = new Window('main');

//路由列表
const routeList = ref<ToolPlugin[]>();

onMounted(() => {
  // 加载数据库
  resolveResource(DATABASE_PATH).then((resourcePath) => {
    Database.load('sqlite:' + resourcePath).then(db => {
      db.select<ToolPlugin[]>('SELECT * FROM tool_plugin tp order by sort')
          .then((result) => {
            routeList.value = result;
          });
    });
  });
})

</script>

<template>
  <div class="main_contain">
    <div data-tauri-drag-region class="w-full titlebar" style="height: 24px;">
      <div @click="() => appWindow.minimize()" class="titlebar-button" id="titlebar-minimize">
        <img
            src="https://api.iconify.design/mdi:window-minimize.svg"
            alt="minimize"
        />
      </div>
      <div @click="() => appWindow.toggleMaximize()" class="titlebar-button" id="titlebar-maximize">
        <img
            src="https://api.iconify.design/mdi:window-maximize.svg"
            alt="maximize"
        />
      </div>
      <div @click="() => appWindow.close()" class="titlebar-button" id="titlebar-close">
        <img src="https://api.iconify.design/mdi:close.svg" alt="close"/>
      </div>
    </div>
    <div style="height: calc(100% - 24px);display: flex">
      <div class="right_main h-full"
           style="display: flex;width:80px;
           flex-direction: column;align-items: center;
           gap: 5px;margin-top: 10px">
        <el-button v-for="(item) in routeList" :key="item.id" @click="router.push({name: item.route_name})">
          {{ item.tool_name }}
        </el-button>
        <div style="flex: 1"></div>
        <el-button style="margin-bottom: 10px" @click="router.push({name: 'Setting'})">
          设置
        </el-button>
      </div>
      <el-divider style="height: 100%" direction="vertical" border-style="solid"/>
      <router-view/>
    </div>
  </div>
</template>

<style scoped>
/* 确保 App.vue 占满整个视口高度 */
.main_contain {
  margin-top: 0;
  background-size: cover;
  backdrop-filter: none;
  background-color: unset;
  width: 100%;
  height: 100vh; /* 使用视口高度 */
}

.titlebar {
  background: #cdcdcd;
  user-select: none;
  display: flex;
  justify-content: flex-end;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 24px;
  user-select: none;
  -webkit-user-select: none;
}

.titlebar-button:hover {
  background: #b8b8b8;
}
</style>